<template>
    <div class="relative mx-[20rpx] mt-[20rpx]">
        <view class="text-center">
            <view class='tooltips'>
                <image src="@/static/images/icon/notice.png" mode="" class="img"></image>
                点击右上角•••添加到我的小程序，方便下次找回
            </view>
        </view>
        <view class="nav-title">精品功能区</view>
        <u-tabs
            :list="tabList"
            :is-scroll="false"
            v-model="current"
            activeColor="var(--color-primary)"
            @change="changeType"
        ></u-tabs>

        <view  :key="sIndex">
            <view class="nav" v-if="navList.length">
                <view
                    class="grid grid-rows-auto gap-y-3 w-full nav-list"
                >
                    <template v-for="(item, index) in navList" :key="index">
                        <view
                            class="nav-item"
                            v-show='+item.type === +type'
                            @click="handleClick(item, index)"
                        >
                            <view class='nav-item-image'>
                                <img width='150' height='150' :src="getImageUrl(item.image)" alt=""/>
                            </view>
                            <view class='nav-item-content'>
                                <view class="mt-[14rpx] nav-item__title">{{ item.name }}</view>
                                <view class="mt-[14rpx] nav-item__description">{{ item.description }}</view>
                                <view class="mt-[14rpx] nav-item__recommend">
                                    <myIssue :score='5'
                                             :starsDisabled="true"
                                             :headPicShow='false'
                                             :textareaShow='false'
                                             :submitShow='false'
                                             headTitleValue='推荐指数'/>
                                </view>
                                <view class='nav-item__extra'>
                                    <view class='nav-item__person'>
                                        <view class='nav-item__personnum'>{{ item.num }}</view>
                                        人
                                    </view>
                                    <button
                                        type="primary"
                                        shape="circle"
                                        class='nav-item__btn'
                                        size="mini"
                                        :plain="true"
                                    >
                                        查看试题
                                    </button>
                                </view>
                            </view>
                        </view>
                    </template>
                </view>
            </view>
        </view>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, shallowRef } from 'vue'
import {useAppStore} from '@/stores/app'
import {navigateTo, sliceArray} from '@/utils/util'
import myIssue from '@/components/issue/myIssue.vue'


const props = defineProps({
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    }
})
const tabList = ref([
    {
        name: '机考',
        type: 1,
        list: [],
    },
    {
        name: '纸笔',
        type: 2,
        list: [],
    },
])
const paging = shallowRef()
const current = ref(0)
const type = ref(1);

const changeType = (index: number) => {
  type.value = tabList.value[index].type;
}

const {getImageUrl} = useAppStore()
const swiperCurrent = ref<number>(0)
const navList = ref<Record<string, any>>([])


watch(
    () => props.content,
    (val) => {
        navList.value = val;
    },
    {deep: true, immediate: true}
)

const handleClick = (link: any) => {
    uni.navigateTo({url: '/pages/news/news?id=' + link.id});
}

const swiperChange = (e: any) => {
    swiperCurrent.value = e.detail.current
}
</script>
<style lang="scss" scoped>
.tooltips{
    text-align: center;
    display: inline-block;
    padding: 6rpx 20rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    background-color: #3b1e7c;
    color:#fff;
    margin: 0 auto;

    image{
        float:left;
        height: 30rpx;
        width: 30rpx;
        position: relative;
        top: 4rpx;
    }
}
.nav-title{
    font-weight: bold;
    font-size: 30rpx;
    text-align: center;
    padding: 20rpx 0;
    background-image: url('@/static/images/icon/title_bg.png');
    background-repeat: no-repeat;
    background-size: 285rpx auto;
    background-position: center center;
}
.nav-list {
    .nav-item[hidden]{
        display:none;
    }

    .nav-item {
        width: 100%;
        border-radius: 20rpx;
        background-color: #fff;
        box-shadow: 0px 5px 10px 5px rgba(100, 100, 100, 0.1);
        display: flex;
        height: 220rpx;
        flex-direction: row;

        .nav-item-image{
            width: 30%;
            height: 220rpx;
            text-align: center;
            line-height: 220rpx;

            img,image{
                width: 70%;
                //height: 220rpx;
                height: 150rpx;
                margin-top: 30rpx;
            }
        }

        .nav-item-content{
            width: 70%;

            .nav-item__title {
                font-weight: bold;
                font-size: 34rpx;
                color:#333;
                margin-top: 20rpx;
            }

            .nav-item__recommend{
                margin-top: 20rpx;
            }

            .nav-item__extra{
                display: block;
                margin-top: 20rpx;

                .nav-item__person{
                    display: inline-block;
                    float: left;

                    .nav-item__personnum{
                        display: inline-block;
                        color: #e71616;
                    }
                }
                .nav-item__btn{
                    float: right;
                    margin-right: 20rpx;
                    background-color: #3b1e7c !important;
                    border-color: #3b1e7c;
                    color:#fff !important;
                    border-radius: 100rpx;
                    height: 50rpx;
                    line-height: 50rpx;
                    padding: 0 20rpx;
                }
            }
        }
    }

}



</style>